<template>
  <div>
    <div class="xian"></div>
    <el-card class="box-card">

      <el-table :data="tableData" class="orderTable orderTable3">
        <el-table-column prop="id" label="分类Id" align="center">
        </el-table-column>
        <!-- <el-table-column prop="parentId" label="父类Id" align="center">
        </el-table-column> -->
        <el-table-column prop="title" label="分类名称" align="center">
        </el-table-column>
        <!-- <el-table-column prop="titleEn" label="分类英文名" align="center">
        </el-table-column> -->
        <!-- <el-table-column prop="layer" label="layer" align="center">
        </el-table-column> -->
        <!-- <el-table-column prop="route" label="route" align="center">
        </el-table-column>
        <el-table-column prop="isEnable" label="状态" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" align="center">
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" icon="el-icon-plus" size="mini" @click.native.prevent="createChiled(scope.row)"></el-button> -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click.native.prevent="gotoEdit(scope.row)"></el-button>
            <el-button type="danger" v-show="!$route.query.delHide" icon="el-icon-delete" size="mini" @click.native.prevent="removeCategory(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { findCategoryByParentId, deleteCategory } from "@/api/category"
export default {
  data() {
    return {
      name: "categoryList",
      parentId: this.$route.query.parentId,
      tableData: []
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      findCategoryByParentId(this.parentId).then(data => {
        this.tableData = data
      })
    },
    removeCategory(row) {
      this.$confirm("此操作将删除该类别以下所有数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteCategory(row.id).then(data => {
          this.showDelete = false
          if (data.result) {
            this.$message({
              message: "删除成功！",
              type: "success"
            })
          }
          this.search(1)
        })
      })
    },
    createChiled(row) {
      const id = row.id
      const route = {
        name: "addCategory",
        query: { parentId: row.id, title: row.title, layer: row.layer },
        meta: {
          title: `创建子类 parentId-${id}`
        }
      }
      this.$router.push(route)
    },
    gotoEdit(row) {
      const id = row.id
      const route = {
        name: "addCategory",
        query: { id: id, parentId: row.parentId },
        meta: {
          title: `编辑分类-${id}`
        }
      }
      this.$router.push(route)
    }
  }
}
</script>

